<template>
  <tableLayout :columns="columns" :get="getData" ref="layout" :selectItem="selectItem"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
    <template v-slot:status="item">
      测试-{{ item.value.text.name }}
    </template>
    <template #button>
      <a-button type="primary" style="margin-left: 20px" @click='add'>新增</a-button>
      <a-button style="margin-left: 20px" @click="edit" :disabled="selectedRowKeys.length !== 1">修改</a-button>
      <a-button type="primary" style="margin-left: 20px" @click="del" :disabled="selectedRowKeys.length !== 1"
        danger>删除</a-button>
    </template>
    <template #operationMore="item">
      <a @click="edit(null,item.value.record)">编辑</a>
      <a-divider type="vertical" />
      <a @click="del(null,item.value.record.Id)">删除</a>
    </template>
    <template v-slot:custom="data">
      <a-input v-model:value="data.formData[data.key]" />
    </template>
  </tableLayout>

  <a-modal :title="formState.Id ? '编辑API资源' : '新增API资源'" v-model:visible="model_visible"
    :confirm-loading="confirmLoading" @ok="model_handleOk" width="900px">
    <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules"
      layout="inline" class="comform">
      <a-form-item label="URL" style="width: calc(50% - 20px);" class="form__item" name="Url">
        <a-input v-model:value="formState.Url" />
      </a-form-item>
      <a-form-item label="控制器" style="width: calc(50% - 20px);" class="form__item" name="Controller">
        <a-input v-model:value="formState.Controller" />
      </a-form-item>
      <a-form-item label="控制器名称" style="width: calc(50% - 20px);" class="form__item" name="ControllerName">
        <a-input v-model:value="formState.ControllerName" />
      </a-form-item>
      <a-form-item label="方法" style="width: calc(50% - 20px);" class="form__item" name="Method">
        <a-input v-model:value="formState.Method" />
      </a-form-item>
      <a-form-item label="描述" style="width: calc(50% - 20px);" class="form__item" name="Message">
        <a-input v-model:value="formState.Message" />
      </a-form-item>
      <a-form-item label="是否禁用" style="width: calc(50% - 20px);" class="form__item" name="Disabled">
        <a-radio-group name="radioGroup" v-model:value="formState.Disabled">
          <a-radio :value="1">启用</a-radio>
          <a-radio :value="0">停用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="允许匿名" style="width: calc(50% - 20px);" class="form__item" name="AllowScope  ">
        <a-checkbox v-model:checked="formState.AllowScope">
        </a-checkbox>
      </a-form-item>
    </a-form>

  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeMount, nextTick, UnwrapRef, reactive } from 'vue';
import tableLayout from '@/components/tableLayout/tableLayout.vue';
import { getData, setApi, delApi } from '@/api/syssetting/resource';
import { ResourceInput } from '@/types/api/syssetting/resource';
import { Layout, message } from 'ant-design-vue';

export default defineComponent({
  name: 'sys_resource',
  components: {
    tableLayout
  },
  setup() {
    const layout = ref();

    //列表
    const columns = [
      { title: '序号', dataIndex: 'Id' },
      { title: '项目名称', dataIndex: 'ProjectName' },
      { title: 'URL', dataIndex: 'Url' },
      { title: '方法', dataIndex: 'Method' },
      { title: '描述', dataIndex: 'Message' },
      { title: '控制器', dataIndex: 'Controller' },
      { title: '是否禁用', dataIndex: 'Disabled' },
      { title: '允许范围', dataIndex: 'AllowScope' },
      { title: '创建时间', dataIndex: 'CreateTime' }
    ]

    // 筛选
    const selectItem = ref([
      { title: '方法', key: 'Method', type: 'input', itemWidth: '290px' },
      { title: '控制器名称', key: 'ControllerName', type: 'input', itemWidth: '290px' },
      { title: '控制器', key: 'Controller', type: 'input', itemWidth: '290px' }
    ])

    // 规则
    const rules = {
      Method: [{ required: true, message: '请输入方法', trigger: 'change' }],
      ControllerName: [{ required: true, message: '请输入控制器名称', trigger: 'change' }],
      Controller: [{ required: true, message: '请输入控制器', trigger: 'change' }],
      URL: [{ required: true, message: '请输入URL', trigger: 'change' }],
    }

    //表单对象
    const formState: UnwrapRef<ResourceInput> = reactive({
      Id: 0,
      ProjectName: "",
      Url: '',
      Method: '',
      Controller: '',
      ControllerName: '',
      Message: '',
      Disabled: false,
      AllowScope: 0
    });

    const add = () => {
      model_visible.value = true;
      Object.assign(formState, {
        Id: 0,
        ProjectName: "",
        Url: '',
        Method: '',
        Controller: '',
        ControllerName: '',
        Message: '',
        Disabled: false,
        AllowScope: 0
      });
    }

    const edit = (event:any,item: any) => {
      let selectItem = item;
      if (!selectItem) {
        if (!selectedRowKeys.value || selectedRowKeys.value.length <= 0 || selectedRowKeys.value.length > 1) {
          message.warning('请先选择一条数据!');
          return;
        }
        selectItem = selectedRows.value[0];
      }
      model_visible.value = true;
      Object.assign(formState, selectItem);
    }

    const del = (event:any,id: any) => {
      let selectId = id;
      if (!selectId) {
        if (!selectedRowKeys.value || selectedRowKeys.value.length <= 0 || selectedRowKeys.value.length > 1) {
          message.warning('请先选择一条数据!');
          return;
        }
        selectId = selectedRows.value[0].Id;
      }

      delApi({ Id: selectId }).then(() => {
        message.success("删除成功!");
        layout.value.getData();
      }).catch(err => {
        message.error(err.message || "删除失败!")
        confirmLoading.value = false;
      })
    }

    const model_visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const formRef = ref()

    const model_handleOk = () => {
      formRef.value.validate().then(() => {
        confirmLoading.value = true;
        setApi(formState).then(e => {
          message.success("添加成功！");
          confirmLoading.value = false;
          model_visible.value = false;
          layout.value.getData();
        }).catch(err => {
          message.error(err.message || "添加失败!")
          confirmLoading.value = false;
        })
      }).catch(() => {
        message.error('请检查必填项是否全部填写!');
      })
    }

    // 多选
    const selectedRowKeys = ref<any[]>([]);
    const selectedRows = ref<any[]>([]);
    const onSelectChange = (keys: [], rows: any) => {
      selectedRowKeys.value = keys;
      selectedRows.value = rows;
    }


    const labelCol = { span: 6 };
    const wrapperCol = { span: 18 };

    return {
      columns, getData, selectItem, layout, add, edit, del, model_visible, confirmLoading, formRef,
      model_handleOk, labelCol, wrapperCol, rules, selectedRowKeys, onSelectChange, formState
    }
  }
})
</script>